<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>ZxEditor - 移动端H5富文本编辑器</title>
  <link rel="stylesheet" href="./dist/css/zx-editor.css">
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #editorContainer {
      padding: 15px;
      /*box-sizing: border-box;*/
    }
  </style>
</head>
<body>
<div id="editorContainer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<!--exif获取照片参数插件-->
<script src="./demo/libs/exif.min.js"></script>
<!--debug-->
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<!--编辑器-->
<script src="./dist/js/zx-editor.js"></script>
<script>
  // 实例化 ZxEditor
  var zxEditor = new ZxEditor('#editorContainer', {
    editable: true,
    // placeholder: '自定义placeholder',
    // lineHeight: 1,
    // padding: '0 0 30px',
    // placeholderColor: 'red',
    cursorColor: 'red',
    // toolbarBtns: ['select-picture', 'text-style']
  })

  // Custom button for the toolbar
  // zxEditor.toolbar.addButton(buttonOptions, index);
  zxEditor.toolbar.addButton({
    name: 'custom-button',
    // button className
    className: '',
    // ElementHTML or $()
    el: null,
    // innerHTML
    innerHtml: '自定义<br>按钮',
    // style
    style: 'background: green;',
    // obj{type: 'click', handler: fn, capture: false} or array[obj1, obj2]
    events: [
      {
        type: 'click',
        handler() {
          alert('click 自定义按钮')
        }
      }
    ]
  })

  // 实例化 VConsole
  new VConsole()

  // console.log(debug)

  console.log('实例化 ZxEditor', zxEditor);

  zxEditor.on('change', function () {
    console.log('change input')
  })

  zxEditor.on('paste', function (e) {
    console.log('paste', e)
  })

  zxEditor.on('keydown', function () {
    // console.log('keydown')
  })

  zxEditor.on('keyup', function () {
    // console.log('keyup')
  })

  zxEditor.on('selectPictureInputChange', function (file, ze, e) {
    // console.log(file, ze, e)
  })

  zxEditor.on('error', function (e, methodName) {
    console.log(methodName)
    console.error(e)
  })

  zxEditor.on('windowResize', function () {
    console.error('windowResize', window.innerHeight)
  })
</script>
</body>
</html>
